<template>
  <div>
    <div class="box">
      <div class="edits" style="margin: 30px 0px;">
        <div>
          基本信息
        </div>
        <div>
          <el-button
            class="back"
            icon="el-icon-arrow-left"
            type="primary"
            @click="go"
            >返回</el-button
          >
        </div>
      </div>
      <el-divider></el-divider>
      <div style="border: 1px solid #ccc; margin: 30px 24px;">
        <el-divider></el-divider>

        <div style="margin: 0 15px;">
          智能渔方编号: &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
          {{ fishInfo.serialNo }}
        </div>
        <el-divider></el-divider>
        <div style="margin: 0 15px;">
          所属用户ID:&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
          {{ userId }}
        </div>
        <el-divider></el-divider>
        <div class="name">
          <div style="width: 130px;">智能渔方名称:</div>
          &nbsp;&nbsp;&nbsp; &nbsp;
          <el-input v-model="fishUsername"></el-input>
        </div>
        <el-divider></el-divider>
        <div style="margin: 30px 16px; display: flex;">
          <div>
            <span>起租日期:</span>
            <el-date-picker
              style="margin: 0 70px;"
              v-model="effectiveDate"
              type="date"
              placeholder="起租日期"
            >
            </el-date-picker>
          </div>
          <div>
            <span>到期日期 : &nbsp; &nbsp; </span>
            <el-date-picker
              v-model="expirationDate"
              type="date"
              placeholder="到期日期"
            >
            </el-date-picker>
          </div>
        </div>
        <el-divider></el-divider>
        <div style="margin: 30px 16px;">
          <span>租赁属性:</span>
          <el-select
            v-model="region"
            placeholder="全部"
            @change="propertyChange(region)"
            style="margin: 0 70px;"
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <el-divider></el-divider>

        <div style="margin: 0 15px;">
          设备号: &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          {{ fishInfo.monitorNo }}
        </div>
        <el-divider></el-divider>
        <div class="name">
          <div style="width: 130px;">设备密码:</div>
          &nbsp;&nbsp;&nbsp; &nbsp;
          <el-input v-model="monitorPwd"></el-input>
        </div>
        <el-divider></el-divider>
        <div>
          <div style="margin: 0 15px;">
            <div>
              展示图片
            </div>
            <el-form>
              <el-form-item prop="file">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  multiple
                  action=""
                  :http-request="httpRequest"
                  :auto-upload="false"
                  :before-upload="beforeAvatarUpload"
                  :on-remove="handleRemove"
                  :on-preview="handlePictureCardPreview"
                >
                  <el-button slot="trigger" size="small" type="primary"
                    >选取文件</el-button
                  >
                  <el-button
                    style="margin-left:5px"
                    size="small"
                    type="primary"
                    @click="submitUploadList"
                    >上传
                  </el-button>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img
                    style="width: 200px; height: 200px;"
                    :src="dialogImageUrl"
                    alt=""
                  />
                </el-dialog>
              </el-form-item>
            </el-form>
            <div v-if="dialogImageUrl">
              <img width="200px" height="200px" :src="dialogImageUrl" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 鱼苗信息 -->
      <div class="box">
        <el-divider></el-divider>
        <span style="margin: 0 20px;">鱼苗信息</span>
        <el-divider></el-divider>
        <div style="text-align: center;">
          <div style="width: 1118px; display: flex;flex-wrap: wrap; ">
            <div
              class="userInfos"
              v-for="(item, index) in fishInfo.fryList"
              :key="index"
            >
              <div
                style="display: flex; justify-content: center; align-items: center; margin: 20px;"
              >
                <div>
                  <img
                    style="width: 220px; height: 100px;"
                    :src="item.fryImag"
                    alt=""
                  />
                </div>
                <div>
                  <div style="margin: 10px 10px;">{{ item.fryName }}</div>
                  <div style="margin: 10px 10px;">
                    已养{{ item.launchedDay }}天
                  </div>
                  <div style="margin: 10px 10px;">
                    <img
                      style="width: 10px; height: 10px;"
                      src="../../../assets/images/bo.png"
                      alt=""
                    />{{ item.launchFryWeight }}斤
                  </div>
                </div>
              </div>
              <div v-if="fishInfo.putFryFlag==1">
                <div style="margin-left: 20px;" v-if="!item.show">
                <van-stepper
                  class="steppers"
                  v-model="item.launchedDay"
                  @change="steeperClick(item.launchedDay, item.fryId)"
                  step="1"
                  min="0"
                  :disable-input="true"
                >
                </van-stepper>
              </div>
              </div>
             
              <div v-show="fishInfo.putFryFlag==1">
                <i
                style="margin-top: -23% ; padding-right: 3%; color: red;"
                @click="remoteClick(index)"
                class="el-icon-delete"
              ></i>
              </div>
              
            </div>
          </div>
        </div>

        <div style="margin-left: 16%; margin-top: 10px;" v-show="fishInfo.putFryFlag==1">
          <el-button type="success" @click="addClick" class="el-icon-plus"
            >添加</el-button
          >
        </div>
        <el-divider></el-divider>
        <div style="margin-left: 15.8%; margin-top: 10px;">
          <el-button type="primary" @click="openClick">确定编辑</el-button>
        </div>
        <el-divider></el-divider>
      </div>
    </div>
    <el-dialog
      title="添加鱼苗"
      :visible.sync="dialogFormVisible"
      width="20%"
      @close="closeBtn"
    >
      <el-form :model="form">
        <el-form-item label="选中鱼苗" label-width="240px">
          <el-select v-model="form.region" @change="dropClick">
            <el-option
              v-for="item in fishData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投放斤数" label-width="240px">
          <el-input
            style="width: 240px;"
            v-model="form.Weight"
            placeholder="请输入需要投放的斤数"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="已养天数" label-width="240px">
          <el-input
            style="width: 240px;"
            placeholder="请输入已养天数"
            v-model="form.day"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickOpen">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  FishParty,
  uploadFileToOss,
  calculateFryWeight,
  fryInfoList,
  fryInfoGetFryById,
  editFishPartyave
} from "@/api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      fishPartyId: "", //渔方ID
      orderId: "", //订单ID
      fishInfo: {}, // 渔方信息
      userId: "", //所属用户id
      fishUsername: "", //渔方名称
      effectiveDate: "", //起租时间
      expirationDate: "", //到期时间
      region: "", //租赁属性
      monitorNo: "", //监控设备号
      monitorPwd: "", //监控密码
      dialogVisible: false,
      dialogImageUrl: "",
      fryList: [],
      fishData: [], //鱼苗信息
      record: {}, //根据id查询的数据
      dialogFormVisible: false,
      form: {
        region:"",
        Weight:"",
        day:""
      },
      status: [
        {
          value: 1,
          label: "租赁3年获得40000元人民币"
        },
        {
          value: 2,
          label: "租赁3年鱼获自行处理"
        },
        {
          value: 3,
          label: "租赁3年获得2400斤鱼"
        }
      ],
      ids: []
    };
  },
  created() {
    this.fishPartyId = this.$route.query.fishPartyId;
    this.orderId = this.$route.query.orderId;
    this.FishParty();
    this.fryInfoList();
  },
  methods: {
    // 添加鱼苗确定按钮
    async clickOpen() {
      this.fishInfo.fryList.forEach(item => {
        if (item.fryId == this.form.region) {
          this.ids = item.fryId;
        }
      });
      if (this.ids == this.form.region) {
        Toast.success("鱼苗已存在,请重新选中鱼苗");
        return;
      } else {
        this.fishInfo.fryList.push({
          fryId: this.record.id,
          fryImag: this.record.image,
          fryName: this.record.name,
          launchFryWeight: this.form.Weight,
          launchedDay: this.form.day,
          show: true
        });
        Toast.success("添加成功");
        this.dialogFormVisible = false;
      }
    },
    // 查询渔苗列表
    async fryInfoList() {
      let result = await fryInfoList();
      if (result.code == 0) {
        this.fishData = result.data;
      }
    },
    // 删除
    remoteClick(index) {
      this.fishInfo.fryList.splice(index, 1);
    },
    // 下拉选择鱼苗
    async dropClick() {
      let data = {
        id: this.form.region
      };
      let result = await fryInfoGetFryById(data);
      if (result.code == 0) {
        this.record = result.data;
      }
    },
    // 清除鱼苗信息
    closeBtn() {
      this.form.Weight = "";
      this.form.day = "";
      this.form.region = "";
    },
    // 确定编辑按钮
   async openClick() {
   
      let addFish = []
      this.fishInfo.fryList.forEach(item=>{

        addFish.push({
          fryId: item.fryId,
          launchedDay: item.launchedDay,
          weight: item.launchFryWeight
          });
      })
      let data = {
        fishPartyName: this.fishUsername,
        effectiveDate: this.effectiveDate + ' 00:00:00',
        expirationDate: this.expirationDate + ' 23:59:59',
        attribute: this.region,
        monitorNo: this.monitorNo,
        monitorPwd: this.monitorPwd,
        fishPartyImg: this.dialogImageUrl,
        fishPartyId: this.fishInfo.fishPartyId,
        orderId: this.fishInfo.orderId,
        partyFryList: addFish,
        reservoirId:this.fishInfo.reservoirId
      };
      let result = await editFishPartyave(data)
      if(result.code==0){
        Toast.success('编辑成功')
        this.$router.go(-1)
      }else{
        Toast.fail('编辑失败,请稍后再试')
      }
    },
    // 添加按钮
    addClick() {
      this.dialogFormVisible = true;
    },
    // 步进器
    async steeperClick(e, id) {
      let data = {
        fishPartyId: this.fishInfo.fishPartyId,
        fryId: id,
        launchedDay: e
      };
      let result = await calculateFryWeight(data);
      if (result.code == 0) {
        this.fishInfo.fryList.forEach(item => {
          if (item.fryId == id) {
            item.launchFryWeight = result.data;
          }
        });
      }
    },
    async httpRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let formData = new FormData(); // FormData 对象
      formData.append("file", fileObj); // 文件对象
      let result = await uploadFileToOss(formData);
      if (result.code == 0) {
        this.dialogImageUrl = result.data;
        this.saveReservoirDTO.img = result.data;
      }
    },
    submitUploadList() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      this.dialogImageUrl = "";
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.name;
      this.dialogVisible = true;
    },
    // 限制图片大小
    beforeAvatarUpload(file) {
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      const isLt500Kb = file.size / 1024 < 500;
      if (!isJPEG && !isJPG && !isPNG) {
        this.$message.error("上传文件只能是图片格式!");
      }
      if (!isLt500Kb) {
        this.$message.error("上传鱼米图片大小不能超过500KB!");
      }
      return (isJPEG || isJPG || isPNG) && isLt500Kb;
    },
    // 租赁属性
    propertyChange(e) {
   
      this.region = e;
    },
    // 返回
    go() {
      this.$router.go(-1);
    },
    // 渔方详情
    async FishParty() {
      let data = {
        fishPartyId: this.fishPartyId,
        orderId: this.orderId
      };
      let result = await FishParty(data);
      if (result.code == 0) {
        this.fishInfo = result.data;
        this.userId = result.data.userId;
        this.fishUsername = result.data.fishPartyName;
        this.effectiveDate = result.data.effectiveDate;
        this.expirationDate = result.data.expirationDate;
        this.region = result.data.attribute;
        this.monitorNo = result.data.monitorNo;
        this.monitorPwd = result.data.monitorPwd;
        this.dialogImageUrl = result.data.fishPartyImg;
        result.data.fryList.forEach(item => {
          this.fryList.push({
            fryId: item.fryId,
            launchedDay: item.launchedDay,
            launchFryWeight: item.launchFryWeight
          });
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.userInfos {
  border: 1px solid #ccc;
  // width: 500px;
  margin: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.name {
  margin: 0 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 -1px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 240px;
}
.box {
  border: 1px solid #ccc;
  width: 98%;
  margin: 10px auto;
}
.edits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  //   background-color: #f3f3f3;
}
// .back{
//     width: 50px;
//     height: 20px;
//     line-height: 20px;
//     text-align: center;
// }
.fish-sprout {
  border: 1px solid #000;
  width: 500px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fish {
  border: 1px solid #ccc;
  width: 98%;
  height: 350px;
  margin: 30px 24px;
}

.fish-info {
  margin-left: 5px;
  height: 25px;
}
.sprout-box {
  display: flex;
  align-items: center;
  margin: 50px 20px;
}
.fish-boxs {
  display: flex;
  align-items: center;
  margin: 36px 15px;
}

.fish-box {
  display: flex;
  margin: 30px 24px;
  width: 98%;
}

.portait-table {
  border-collapse: collapse;
  border: none;
  width: 100%;

  td {
    border: 1px solid #f3f3f3;
    height: 40px;
    padding-left: 10px;
    color: #333;

    &:nth-child(odd) {
      background: #f9fafc;
      color: #454545;
    }
  }

  .edit {
    border: 1px solid #ccc;
    width: 180px;
  }

  .edit-img {
    width: 180px;
    height: 50px;
  }
}
</style>
